<template>
    <div style="background:#fff">
        <div>
            <el-row align='middle' type='flex' style="height:3.69rem;padding:0 1.37rem;">
                <!-- <el-col :span="2">
                    <i class="el-icon-s-unfold" style="font-size:1.37rem;" @click="()=>{
                    this.drawer=true
                    }"></i>
                </el-col> -->
                <el-col :span="24" style="font-size:1.12rem;height:100%;display:flex;align-items:center;">
                    <!--  v-if="init.logo" -->
                    <!-- <img style="height:2.375rem;margin-right:8px;" src="@/assets/logo.png" alt=""> -->
                    <div style="color:#0052D9;width:calc(100%);" class="title">
                        {{pageTitle.split('/')[0]}}{{pageTitle.includes('/')?pageTitle.split('/')[1]:''}}
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-drawer
            :visible.sync="drawer"
            direction="ltr"
            size='60%'
            :with-header="false"
            :before-close="handleClose"
            >
            <el-tabs tab-position="left" style="height:100%;" type='border-card' v-model='menuTabA' @tab-click='clickTab'>
                <el-tab-pane label="网站首页" name='0'></el-tab-pane>
                <el-tab-pane label="在线练习" name='1'></el-tab-pane>
                <el-tab-pane label="模拟考试" name='2'></el-tab-pane>
                <el-tab-pane label="培训学习" name='3'></el-tab-pane>
                <el-tab-pane label="政策法规" name='4'></el-tab-pane>
                <el-tab-pane label="培训公告" name='5'></el-tab-pane>
                <el-tab-pane label="联系我们" name='6'></el-tab-pane>
                <el-tab-pane label="在线报名" name='9'></el-tab-pane>
            </el-tabs>
        </el-drawer>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import'@/styles/mobile.css';
export default {
    computed:{
        ...mapGetters(['init','http','menuTab','pageTitle'])
    },
    data() {
        return {
            drawer:false,
            menuTabA:'0',
        }
    },
    watch:{
    },
    methods: {
        handleClose(){
           this.drawer=false 
        },
        clickTab(node){
            let val = node.name
            this.$store.commit('SET_MENUTAB',val)
            switch(val){
                case '0' :
                    this.$router.push('/')
                    break;
                case '1' :
                    window.open(this.http+'/user','_self')
                    break;
                case '2' :
                    window.open(this.http+'/user','_self')
                    break;
                case '3' :
                    window.open(this.http+'/user','_self')
                    break;
                case '4' :
                    this.$router.push('/training')
                    break;
                case '5' :
                    this.$router.push('/regulations')
                    break;
                case '6' :
                    this.$router.push('/about')
                    break;
                case '7' :
                    window.open(this.http+'/user','_self')
                    break;
                case '8' :
                    window.open(this.http+'/user','_self')
                    break;
                case '9' :
                    this.$router.push('/apply')
                    break;     
            }
        }
    },
    created() {
        this.menuTabA=this.menuTab
        console.log(this.init,'1252511')
    },
}
</script>

<style lang="scss" scoped>
.title{
    display:flex;
    justify-content: center;

}
::v-deep{
    .el-drawer__body{
        padding:24px 0;
         background: #F5F7FA;
        .el-tabs--border-card{
            border: none;
            box-shadow: none;
           .el-tabs__header{
               border-bottom:0;
           }
        }
    }
    .el-tabs__header{
        width:100% !important;
        .el-tabs__item{
            text-align: center !important;
        }
    }
}
</style>